<!-- 设置动态表单组件--左侧控件列表 -->
<template>
  <div class="leftConfig">
    <div class="formSetUp">
      <div class="leftConfig-title">表单设置</div>
      <div class="formSetUp-body">
        <a-radio-group type="button" v-model="copyLayout">
          <a-radio value="horizontal">水平排列</a-radio>
          <a-radio value="vertical">垂直排列</a-radio>
          <!-- <a-radio value="inline">行内排列</a-radio> -->
        </a-radio-group>
      </div>
    </div>
    <div class="tabs">
      <!--tabs列表  -->
      <a-tabs lazy-load v-model:active-key="tabChoiceKey">
        <a-tab-pane
          :key="item.code"
          :title="item.tabName"
          v-for="item in tabShowList"
        />
      </a-tabs>

      <a-scrollbar style="height: 660px; overflow: auto">
        <!-- 拖拽组件 -->
        <draggable
          class="tabComponentBox"
          :list="componentTabList"
          :group="{ name: 'people', pull: 'clone', put: false }"
          itemKey="controlName"
          :clone="cloneItem"
          @end="addControl"
        >
          <template #item="{ element }">
            <div class="tabComponentBox-item">
              <a-button>
                <template #icon>
                  <icon-font :type="element.icon" :size="14"></icon-font>
                </template>
                <template #default>
                  {{ element.componentName || element.name }}
                </template>
              </a-button>
            </div>
          </template>
        </draggable>
      </a-scrollbar>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { Icon } from '@arco-design/web-vue';
import uniqueid from 'lodash.uniqueid';
import draggable from 'vuedraggable';
// import { PostControl, GetControl } from '@/apis/management/base';
import { tabList, componentList } from '../../../set-up-config';
import { cloneDeep } from 'lodash';

const props = withDefaults(
  //参数说明
  defineProps<{
    tabCodeList: string[]; //tab显示的tab列表
    layout: string;
  }>(),
  {}
);

const emit = defineEmits(['layoutChange']);

const copyLayout = computed({
  get() {
    return props.layout;
  },
  set(val) {
    emit('layoutChange', val);
  }
});

const IconFont = Icon.addFromIconFontCn({
  src: 'https://at.alicdn.com/t/c/font_3782788_m3fazt9fbc.js'
});
const tabChoiceKey = ref('allComponent'); //tab 选中的key

//通过tabCodeList过滤出要显示的tab列表
const tabShowList = computed<any>(() => {
  const list = props.tabCodeList.map((code) =>
    tabList.find((item) => code === item.code)
  );
  return list;
});
console.log('tabShowList', tabShowList);

const allComponentsList = ref([]); // 储存所有数据库控件
const getAllComponents = async () => {
  try {
    // allComponentsList.value = await GetControl();
  } catch (error: unknown) {
    console.log(error);
  }
};
getAllComponents();

//通过tabShowList过滤出要显示的component列表
const componentTabList: any = computed(() => {
  if (tabChoiceKey.value !== 'allComponent') {
    const tabItem = tabShowList.value.find(
      (item: any) => tabChoiceKey.value === item.code
    );
    return tabItem.componentCodeList.map((code: string) =>
      componentList.find((item) => item.code === code)
    );
  } else {
    return allComponentsList.value;
  }
});

console.log(componentTabList);

// 新增控件
const addControl = async (val) => {
  const temp = cloneDeep(val.item._underlying_vm_);
  temp.props = JSON.stringify(temp.props);
  temp.type = [1];
  console.log(temp);
  // await PostControl(temp);
};

//拖拽发生时return处理过后的数据
const cloneItem = ({
  componentType,
  props,
  code,
  componentName,
  fieldName,
  id,
  name,
  span
}: any) => {
  // let isProcessConditions = 2; // 是否设为流程条件
  // if (componentType === 'TEXT_AREA') span = 24;
  // else span = 12; // 控件默认宽度，如果是长控件需重新赋值24，如表格，交货要求
  // let fieldName = '';
  let isDefault = 2;
  let enable = 1;
  // 如果控件有id
  if (id) {
    return {
      id,
      show: 1,
      componentType,
      code,
      props,
      name,
      required: 2,
      span,
      uuid: uniqueid(''),
      isDefault,
      enable,
      // values: [],
      isMust: 2,
      // isProcessConditions,
      fieldName
    };
  } else {
    return {
      show: 1,
      componentType,
      code,
      props,
      name: componentName,
      required: 2,
      span,
      uuid: uniqueid(''),
      isDefault,
      enable,
      // values: [],
      isMust: 2,
      // isProcessConditions,
      fieldName
    };
  }
};
</script>

<style lang="less" scoped>
.leftConfig {
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 100vh;

  &-title {
    line-height: 40px;
    height: 40px;
    border-bottom: var(--color-neutral-3) solid 1px;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    font-size: 16px;
  }
}

.formSetUp {
  border-bottom: var(--color-neutral-3) solid 1px;

  &-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.tabComponentBox {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px;

  &-item {
    border: rgb(212, 212, 212) dashed 1px;
    background: rgb(250, 250, 250);
    width: 120px;
    padding: 5px;
    cursor: pointer;
    margin-bottom: 10px;
  }

  :deep(.arco-btn-secondary) {
    width: 100%;
  }

  &-item:hover {
    background: rgb(241, 238, 255);

    span {
      color: rgb(181, 172, 226);
    }
  }
}
</style>
